import React, { useEffect, useState } from 'react'; 
import { useHistory } from "react-router-dom";
import {
    Tabs, Toast, Flex, Card
} from 'antd-mobile';
import { dateFormat } from "../../model/code";
import http from "../../model/http";
import { Calendar } from 'react-h5-calendar';  
import Header from "../../components/header/Header";  
import './SchedulingQuery.less'
function SchedulingQuery() { 
    const nowTimeStamp = new Date(); 
    const [dateValue, setDateValue] = useState(nowTimeStamp) 
    const [doctorList, setDoctorList] = useState([])
    const [tabsValue, setTabsValue] = useState('DE0011')
    const tabs = [
        { title: '整形中心', value: 'DE0011' },
        { title: '皮肤中心', value: 'DE0012' },
        { title: '无创中心', value: 'DE0013' },
        { title: '口腔中心', value: 'DE0014' },
        { title: '植发中心', value: 'DE0045' },
    ];
    const getDoctorDayFunc = async (d,tid) => {
        const deptidDoctor = await http.post('/scheduler/getAllExpertPBInfo',{
            date: d,
            deptId: tid
        }) 
        if(deptidDoctor.code == 0){
            setDoctorList(deptidDoctor.data)
        }else{
            Toast.fail(deptidDoctor.msg)
        }
    }
    useEffect(async () => {  
        getDoctorDayFunc(dateFormat(nowTimeStamp, 'yyyy-MM-dd'), tabsValue)
    },[])
    // 点击tabs
    const tabsClick = (v) => {
        console.log(v)
        setTabsValue(v.value)
        getDoctorDayFunc(dateFormat(dateValue, 'yyyy-MM-dd'), v.value)
    }
    const onDateClick = (d) => { 
        setDateValue(d.$d)   
        getDoctorDayFunc(dateFormat(d.$d, 'yyyy-MM-dd'), tabsValue)
    }
    return (
        <div className="v-scheduling-query"> 
            {/* swipeable */}
            <Tabs tabs={tabs}   swipeable={false}  renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />} onChange={(v) => tabsClick(v)}>
                <div>
                    <Calendar 
                        onDateClick={(d) => onDateClick(d)}
                        showType={'month'}
                        markDates={[]}
                        markType="dot"
                        currentDate={dateValue} 
                    />
                    <div className="edit-card-box">
                        {doctorList.length> 0 ? doctorList.map((item,idx) => (
                            
                                <Card>
                                    <Card.Body>
                                        <Flex className="edit-card">
                                            <img src={item.avatar} />
                                            <p>{item.user_name}</p> 
                                            <p style={item.shiftType_id == -1?{color:'#3CB371'}:{}}>{item.stname}</p>

                                            <span>{item.is_provide == 1?'[坐诊]':''}</span>
                                        </Flex>
                                        
                                            {/* <Flex className="edit-card-list">账号：{item.account}</Flex> */}
                                            <Flex className="edit-card-list">工作日期：{item.work_date}</Flex>
                                            <Flex className="edit-card-list">工作时间：{item.begin} ~ {item.end}</Flex>
                                        
                                    </Card.Body>
                                    
                                </Card>))
                        
                        :<div className='test-color'>暂无更多数据</div>}
                    </div>
                </div>
                
            </Tabs>
            <Header />
        </div>
        
    )
}
export default SchedulingQuery